import {Form, Input, Button, Tabs, message, Typography, Space} from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import styles from './login.less';
import request from "umi-request";
import {history} from "@@/exports";
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const onFinish = (values: any) => {
    request
        .post("/api/login", {
            data: values,
        })
        .then((res) => {
            if(res.status == "success"){
                message.success(res.message);
                localStorage.setItem("token",res.token);
                history.push("/");
            }else{
                message.error(res.message);
            }
        })
        .catch((error) => {
            message.error("系统异常！").then((r) => {
                console.log(r);
            });
        });
};

export default function Login() {
    const items = [{
        label: '账户密码登录',
        key: '1',
        children: (
            <Form
                name="normal_login"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                size="large"
            >
                <div style={{ textAlign: 'center', marginBottom: '30px' }}>
                    <Title level={3} style={{ color: '#1890ff', marginBottom: '8px' }}>菜牛任务调度系统</Title>
                    <Text type="secondary">高效、可靠的分布式任务调度平台</Text>
                </div>
                
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                    style={{ borderBottom: '1px solid #DCDCDC' }}
                >
                    <Input 
                        prefix={<UserOutlined style={{ color: '#bfbfbf' }} />} 
                        placeholder="请输入用户名" 
                        bordered={false} 
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                    style={{ borderBottom: '1px solid #DCDCDC' }}
                >
                    <Input
                        prefix={<LockOutlined style={{ color: '#bfbfbf' }} />}
                        bordered={false}
                        type="password"
                        placeholder="请输入密码"
                    />
                </Form.Item>

                <Form.Item>
                    <Button 
                        type="primary" 
                        htmlType="submit" 
                        block
                        style={{ 
                            height: '48px', 
                            borderRadius: '6px',
                            marginTop: '30px',
                            fontSize: '16px',
                            fontWeight: 500
                        }}
                    >
                        登录
                    </Button>
                </Form.Item>
                
                <div style={{ textAlign: 'center', marginTop: '16px' }}>
                    <Space>
                        <SafetyOutlined style={{ color: '#1890ff' }} />
                        <Text type="secondary" style={{ fontSize: '13px' }}>安全登录 · 系统受到保护</Text>
                    </Space>
                </div>
            </Form>
        )
    }]
    
    return (
        <div className={styles.bg}>
            <div className={styles.login_card}>
                <Tabs 
                    defaultActiveKey="1" 
                    centered 
                    style={{ margin: '0 auto' }}
                    items={items}
                />
            </div>
        </div>
    )
}
